<template>
	<view>
		<view  class="bg-light position-relative" hover-class="bg-hover-light" style="height:350rpx" @click="upload">
			<image  v-if="form.cover" :src="form.cover"  mode="aspectFill" style="width: 750rpx;height: 350rpx;"></image>
			<view class="position-absolute bottom-0 top-0 left-0 right-0 flex flex-column align-center justify-center" style="background-color: rgba(255,255,255,0.2);">
				<text class="iconfont iconjia font-md" style="font-size: 50rpx;"></text>
				<text class="text-muted">点击{{form.cover ? '切换' : '添加'}}封面图</text>
			</view>
		</view>
		<view class="px-3 py-2">
			<form-item label="标题">
				<input type="text" v-model="form.title" placeholder="请填写视频标题" placeholder-class="text-light-muted"  class="w-100 pr-5" />
			</form-item>	
			<picker mode="selector" :range="range" @change="change">
				<form-item label="分类">
						<input type="text" v-model="form.category" placeholder="请选择分类" placeholder-class="text-light-muted" disabled />
				</form-item>
			</picker>
				<form-item label="描述">
				   <textarea  v-model="form.desc" placeholder="请填写视频描述"   placeholder-class="text-light-muted align-center" style="width: 550rpx;" class="py-3"/>
				</form-item>
		</view>
		<!-- #ifdef MP -->
		<!-- 小程序发布 -->
			<button type="default" style="background-color: #FB85A7;color:#fff;margin: 35rpx;" @click="show">立即投稿</button>
		<!-- #endif -->
		
	</view>
</template>

<script>
	import formItem from "@/components/common/form-item.vue";
	export default {
		components:{
			formItem
		},
		data() {
			return {
				form:{
					cover:"",
					title:"",
					category:"",
					desc:""
				},
				range:["分类1","分类2","分类3"]
			}
		},
		methods: {
			change(e) {
				//console.log(e);
				this.form.category = this.range[e.detail.value]
			},
			upload() {
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				    success:(res)=> {
				        console.log(JSON.stringify(res.tempFilePaths));
						this.form.cover = res.tempFilePaths[0];
				    }
				});
			}
		}
	}
</script>

<style>
</style>
